<%--
  Created by IntelliJ IDEA.
  User: 王旭东
  Date: 2024/12/20
  Time: 21:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>动物领养中心</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Animate.css (可选，用于动画效果) -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <style>
        /* 自定义 CSS */

        /* 轮播图样式 */
        .carousel-caption {
            background: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
        }

        .carousel-item img {
            height: 500px;
            object-fit: cover;
        }

        /* 宠物卡片样式 */
        .pet-card {
            border: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s, box-shadow 0.3s;
            display: flex;
            flex-direction: column;
            height: 400px; /* 设置固定高度 */
        }

        .pet-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .pet-image {
            flex: 1 0 auto; /* 图片区域自适应 */
            border-bottom: 1px solid #dee2e6;
        }

        .pet-info {
            flex: 0 0 auto; /* 信息区域固定 */
            padding: 1rem;
        }

        .pet-info h5 {
            font-weight: bold;
            color: #343a40;
            margin-bottom: 0.5rem;
        }

        .pet-info p {
            font-size: 0.9rem;
            color: #6c757d;
            margin-bottom: 0.25rem;
        }

        /* 宠物列表标题样式 */
        #petListContainer h2 {
            text-align: center;
            margin-top: 50px;
            margin-bottom: 1.5rem;
            color: transparent;
            /* 可选：如果你希望文本仍然占据空间，可以添加以下属性 */
            /* text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); */
        }

        /* 切换按钮样式 */
        #petButtons {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 2rem;
            width: 100%;
        }

        #adoptedBtn, #unadoptedBtn,#commentBtn{
            position: relative;
            width: 200px;
            margin: 0 1rem;
            font-size: 1.2rem;
            padding: 0.75rem 1.5rem;
            border-radius: 30px;
            transition: background-color 0.3s, border-color 0.3s;
        }

        #adoptedBtn.btn-primary, #unadoptedBtn.btn-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
            color: #fff;
        }

        #adoptedBtn.btn-secondary, #unadoptedBtn.btn-secondary {
            background-color: #6c757d;
            border-color: #6c757d;
            color: #fff;
        }

        #adoptedBtn:hover, #unadoptedBtn:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }

        /* 添加图标 */
        #adoptedBtn i, #unadoptedBtn i {
            margin-right: 0.5rem;
        }

        .link-btn {
            display: inline-block; /* 使链接表现为块级元素，以便于应用样式 */
            text-align: center; /* 文本居中 */
            vertical-align: middle; /* 垂直居中 */
            user-select: none; /* 防止用户选择文本 */
            border: 1px solid transparent; /* 透明边框 */
            padding: 0.75rem 1.5rem; /* 内边距 */
            font-size: 1rem; /* 字体大小 */
            font-weight: 400; /* 字体权重 */
            line-height: 1.5; /* 行高 */
            border-radius: 0.25rem; /* 边框圆角 */
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* 平滑过渡效果 */
            text-decoration: none; /* 去除下划线 */
            color: #fff; /* 字体颜色 */
            background-color: #0d6efd; /* 背景颜色 */
            border-color: #0d6efd; /* 边框颜色 */
        }

        .link-btn:hover {
            color: #fff; /* 鼠标悬浮时字体颜色不变 */
            background-color: #0056b3; /* 鼠标悬浮时背景颜色 */
            border-color: #0056b3; /* 鼠标悬浮时边框颜色 */
        }

        /* 添加图标 */
        .link-btn i {
            margin-right: 0.5rem; /* 图标右边距 */
        }
    </style>
</head>
<body>
<jsp:include page="navigation.jsp"></jsp:include>

<!-- 轮播图 -->
<div class="container">
    <div id="carouselPet" class="carousel slide" data-bs-ride="carousel">
        <!-- 轮播图指示器 -->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#carouselPet" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#carouselPet" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carouselPet" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <!-- 轮播图内容 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="${pageContext.request.contextPath}/static/images/home/1.jpg" class="d-block w-100" alt="宠物1">
                <div class="carousel-caption d-none d-md-block">
                    <h5>欢迎来到动物领养中心</h5>
                    <p>在这里，您可以为无家可归的动物提供一个温暖的家。</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="${pageContext.request.contextPath}/static/images/home/2.jpg" class="d-block w-100" alt="宠物2">
                <div class="carousel-caption d-none d-md-block">
                    <h5>我们的使命</h5>
                    <p>致力于为动物提供最好的照顾和领养服务。</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="${pageContext.request.contextPath}/static/images/home/3.jpg" class="d-block w-100" alt="宠物3">
                <div class="carousel-caption d-none d-md-block">
                    <h5>加入我们</h5>
                    <p>成为志愿者或领养一只宠物，改变它们的生活。</p>
                </div>
            </div>
        </div>
        <!-- 轮播图控制按钮 -->
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselPet" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">上一张</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselPet" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">下一张</span>
        </button>
    </div>
</div>

<!-- 主要内容 -->
<div class="container my-5">
    <!-- 切换按钮 -->
    <div id="petButtons">
        <button class="btn btn-primary me-2" id="adoptedBtn">
            <i class="fas fa-paw"></i> 宠物展示
        </button>

        <a href="${pageContext.request.contextPath}/user/comment" class="link-btn">
            <i class="fas fa-comment"></i> 评论
        </a>

        <button class="btn btn-secondary" id="unadoptedBtn">
            <i class="fas fa-heart"></i> 未被领养的宠物
        </button>


    </div>

    <!-- 宠物列表显示区域 -->
    <div class="row" id="petListContainer">
        <!-- 已领养的宠物 -->
        <div id="adoptedPets">
            <h2 class="mb-4">宠物展示</h2>
            <div class="row">
                <c:forEach items="${petList}" var="pet">
                    <div class="col-md-4">
                        <div class="card pet-card mb-4">
                            <img src="${pageContext.request.contextPath}/static/images/animal/${pet.pic}" class="card-img-top pet-image" alt="宠物图片" style="height: 200px; object-fit: cover;">
                            <div class="card-body pet-info">
                                <h5 class="card-title">${pet.petName}</h5>
                                <p class="card-text"><strong>性别:</strong> ${pet.sex}</p>
                                <p class="card-text"><strong>生日:</strong> ${pet.birthday}</p>
                                <p class="card-text"><strong>状态:</strong>
                                    <c:choose>
                                        <c:when test="${pet.state == 0}">
                                            待审核
                                        </c:when>
                                        <c:when test="${pet.state == 1}">
                                            已通过
                                        </c:when>
                                        <c:when test="${pet.state == 2}">
                                            未通过
                                        </c:when>
                                        <c:otherwise>
                                            未知状态
                                        </c:otherwise>
                                    </c:choose>
                                </p>
                                <p class="card-text"><strong>评语:</strong> ${pet.remark}</p>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>

        <!-- 未被领养的宠物 -->
        <div id="unadoptedPets" style="display: none;">
            <h2 class="mb-4">未被领养的宠物</h2>
            <div class="row">
                <c:forEach items="${petNoList}" var="pet">
                    <div class="col-md-4">
                        <div class="card pet-card mb-4">
                            <img src="${pageContext.request.contextPath}/static/images/animal/${pet.pic}" class="card-img-top pet-image" alt="宠物图片" style="height: 200px; object-fit: cover;">
                            <div class="card-body pet-info">
                                <h5 class="card-title">${pet.petName}</h5>
                                <p class="card-text"><strong>性别:</strong> ${pet.sex}</p>
                                <p class="card-text"><strong>生日:</strong> ${pet.birthday}</p>
                                <p class="card-text"><strong>评语:</strong> ${pet.remark}</p>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
</div>




<!-- Bootstrap JS (Bootstrap 5) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Font Awesome JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<!-- Animate.css JS (如果需要) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.js"></script>

<!-- 自定义 JS -->
<script>
    // 轮播图自动播放
    var myCarousel = document.querySelector('#carouselPet');
    var carousel = new bootstrap.Carousel(myCarousel, {
        interval: 5000,
        wrap: true
    });

    // 卡片悬停动画
    document.querySelectorAll('.pet-card').forEach(function(card) {
        card.addEventListener('mouseenter', function() {
            card.classList.add('animate__animated', 'animate__pulse');
        });
        card.addEventListener('mouseleave', function() {
            card.classList.remove('animate__animated', 'animate__pulse');
        });
    });

    // 切换按钮逻辑
    var adoptedBtn = document.getElementById('adoptedBtn');
    var unadoptedBtn = document.getElementById('unadoptedBtn');
    var adoptedPets = document.getElementById('adoptedPets');
    var unadoptedPets = document.getElementById('unadoptedPets');

    adoptedBtn.addEventListener('click', function() {
        adoptedPets.style.display = 'block';
        unadoptedPets.style.display = 'none';
        adoptedBtn.classList.add('btn-primary');
        adoptedBtn.classList.remove('btn-secondary');
        unadoptedBtn.classList.add('btn-secondary');
        unadoptedBtn.classList.remove('btn-primary');
    });

    unadoptedBtn.addEventListener('click', function() {
        adoptedPets.style.display = 'none';
        unadoptedPets.style.display = 'block';
        adoptedBtn.classList.add('btn-secondary');
        adoptedBtn.classList.remove('btn-primary');
        unadoptedBtn.classList.add('btn-primary');
        unadoptedBtn.classList.remove('btn-secondary');
    });

    // 初始化时显示已领养的宠物
    document.addEventListener('DOMContentLoaded', function() {
        adoptedBtn.click();
    });



</script>
</body>
</html>